<template>
	<view class="pr" :data-theme="theme()" :class="theme() || ''">
		<!-- 头部背景图 -->
		<view class="bg_topimg">
			<view :style="'height:' + topheight + 'px;'" class="bg-head-shoadow"></view>
			<image lazy-load v-if="shop_info.back_image" :style="'height:' + topheight + 'px;'" class="bg-head"
				:src="shop_info.back_image" mode="aspectFill"></image>
		</view>
		<!-- 头部 -->
		<view class="shop_head" :class="{ bgNull: shop_info.back_image }">
			<!-- #ifndef MP-WEIXIN-->
			<view class="state_top"></view>
			<!-- #endif -->
			<view class="head_top" :style="'height:' + topBarTop() + 'px;'"></view>
			<view class="d-b-c serach-box" :style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;'">
				<!-- 返回首页按钮 -->
				<view @click="gotoPage('/pages/index/index')" class="icon iconfont icon-Homehomepagemenu"></view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="d-s-c flex-1">
					<view class="top_search special d-s-c">
						<text class="icon iconfont icon-sousuo"></text>
						<input type="text" class="flex-1 ml10 f26 gray3" placeholder-class="f26 gray9"
							placeholder="搜索商品" v-model="search" confirm-type="search" @confirm="searchFunc()" />
					</view>
				</view>
				<!-- #endif -->
				<!-- 搜索栏 小程序胶囊处理 -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="d-s-c flex-1">
					<view class="top_search search-wx d-s-c"
						:style="'height:' +  topBarHeight() +  'px;;margin-right:' + topBarRight() + ';'">
						<text class="icon iconfont icon-sousuo"></text>
						<input type="text" class="flex-1 ml10 f26 gray3" placeholder-class="f26 gray9"
							placeholder="搜索商品" v-model="search" confirm-type="search" @confirm="searchFunc()" />
					</view>
				</view>
				<!-- #endif -->
			</view>
			<!-- 商户信息 -->
			<view class="shop_head_info">
				<view class="d-s-s mb30">
					<view class="shop_logo">
						<image lazy-load class="shop_logo_image" :src="shop_info.logos ||'/static/shop-default.png'"
							mode="aspectFill"></image>
					</view>
					<view class="shop_info"
						@click="gotoPage('/pages/shop/shop_detail?shop_supplier_id=' + shop_supplier_id)">
						<view class="white f30 fb title mb10">
							{{ shop_info.store_name || ""}}<text class="icon iconfont icon-jiantou1"></text>
						</view>
						<view class="d-s-c white f24 mb10">
							<view class="pr d-s-c">
								<view class="starts-box">
									<image lazy-load class="starts" v-for="(itme, index) in getScore(shop_info.server_score, 1)"
										:key="index" src="/static/icon/start-2.png" mode=""></image>
									<image lazy-load class="starts" v-if="getScore(shop_info.server_score, 2)"
										src="/static/icon/start-1.png" mode=""></image>
								</view>
								<image lazy-load class="starts" v-for="(itme, index) in 5" :key="index"
									src="/static/icon/start-0.png" mode=""></image>
							</view>
							{{ shop_info.server_score || "" }}分
						</view>
						<view class="f24 white">主营品牌：{{ shop_info.category_name || "" }}</view>
					</view>
				</view>
				<view class="d-b-c f24 white">
					<view class="d-c d-c-c p-0-30">
						<view class="mb10">{{ shop_info.product_sales || "0" }}</view>
						<view>销量</view>
					</view>
					<view class="d-c d-c-c p-0-30">
						<view class="mb10">{{ shop_info.fav_count || "0" }}</view>
						<view>粉丝</view>
					</view>
					<view class="flex-1 d-e-c">
						<view class="collected" @click="guanzhu()">
							{{ isfollow ? "已关注" : "+关注" }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="'height:' + scrollviewHigh + 'rpx;'" class="scroll-Y pr"
			lower-threshold="50" @scrolltolower="scrolltolowerFunc">
			<view class="swiper-box pr" v-if="adList && adList!=''">
				<swiper class="swiper" autoplay :interval="2000" @change="changeSwiper">
					<swiper-item class="o-h d-c-c" v-for="(item, index) in adList" :key="index">
						<image lazy-load :src="item.image.file_path"></image>
					</swiper-item>
				</swiper>
				<view class="swiper-dots rectangle ww100 d-c-c">
					<view :class="swiperCurrent == index ? 'swiper-dot active' : 'swiper-dot'"
						v-for="(item, index) in adList" :key="index"></view>
				</view>
			</view>
			<!-- 商品导航栏 -->
			<view class="inner-tab" v-if="nav_type == 0">
				<view :class="type_active == 'all' ? 'item active' : 'item'" @click="tabTypeFunc('all')">
					<view class="box">综合</view>
				</view>
				<view :class="type_active == 'sales' ? 'item active' : 'item'" @click="tabTypeFunc('sales')">
					<view class="box">销量</view>
				</view>
				<view :class="type_active == 'price' ? 'item active' : 'item'" @click="tabTypeFunc('price')">
					<view class="box"><text>价格</text></view>
				</view>
				<view class="item" @click="select_type()">
					<view class="box">
						<image lazy-load class="box-type" :src="
				  isLieBiao == true
				    ? '/static/shop/liebiao.png'
				    : '/static/shop/tubiao.png'
				">
						</image>
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="product-lists" v-if="nav_type == 0" :class="isLieBiao ? '' : 'list-2'">
				<view class="product_item" v-for="(item, index) in product_list" :key="index"
					@click="goto_product(item.product_id)">
					<view class="product_images pr">
						<view class="product-sellout" v-if="item.product_stock <= 0">
							<view class="product-sellout-btn">售罄</view>
						</view>
						<image lazy-load class="product_image" :src="item.product_image" mode="aspectFill"></image>
					</view>
					<view class="product_item_info">
						<view class="product-name">{{ item.product_name }}</view>
						<view class="product-sale">累计成交：{{ item.product_sales }}笔</view>
						<view class="d-s-c pb10">
							<view class="f24 theme-price mr16">
								¥<text class="f32 fb">{{ item.product_price }}</text>
							</view>
							<view class="text-d-line gray9 f24" v-if="item.line_price*1 > 0">¥{{ item.line_price }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 直播 -->
			<view v-if="nav_type == 1">
				<view class="live_list" v-if="liveList.length > 0">
					<view v-for="(liveitem, liveindex) in liveList" :key="liveindex" class="live_item"
						@click="toRoom(liveitem)">
						<view v-if="liveitem.record_url != ''" class="record">可回放</view>
						<view v-if="liveitem.record_url == ''" class="record_off">回放生成中</view>
						<view class="live_img">
							<image lazy-load :src="liveitem.share.file_path" mode=""></image>
						</view>
					</view>
				</view>
				<view class="ww100" v-else>
					<view class="f30 gray6 tc mt50 pt20">暂无直播间</view>
				</view>
			</view>

			<!-- 优惠券 -->
			<view class="coupon" v-if="nav_type == 2">
				<view class="diy-coupon">
					<view class="item-wrap" v-for="(item, index) in listData" :key="index">
						<view class="coupon-item" :class="'coupon-item-' + item.color.text">
							<view class="operation d-b-c">
								<view class="flex-1 coupon-content">
									<view class="mb20 text-ellipsis">
										<text class="f40 fb">{{ item.name }}</text>
									</view>
									<view class="f22 gray9 mb20">
										<template v-if="item.expire_type == 10">
											有效期：领取{{ item.expire_day }}天内有效
										</template>
										<template v-if="item.expire_type == 20">
											有效期：{{ item.start_time.text }}至{{ item.end_time.text }}
										</template>
									</view>
									<view v-if="item.max_price != 0" class="f22">(最大优惠{{ item.max_price }}元)</view>
								</view>
								<view class="right-box d-c-c d-c">
									<view class="theme-price mb10" v-if="item.coupon_type.value == 10">
										<text class="f24">￥</text>
										<text class="f52 fb">{{ item.reduce_price * 1 }}</text>
									</view>
									<view class="mb10 theme-price" v-if="item.coupon_type.value == 20">
										<text class="f52 fb">{{ item.discount}}</text>
										<text class="f24">折</text>
									</view>
									<view class="f24 mb10">
										{{ item.min_price > 0 ? '满' + item.min_price * 1 + '元可用' : '无门槛' }}
									</view>
									<view v-if="item.is_get == 0" class="f26 coupon-btn theme-btn"
										@click="receiveCoupon(index)">领取</view>
									<button type="default" v-else class="f26 coupon-btn btn-gray white"
										v-on:click.stop>已领取</button>
								</view>
							</view>
						</view>
						<view class="range_item d-b-c" v-if="item.apply_range == 20"
							@click.stop="gotoPage('/pages/coupon/detail?coupon_id=' + item.coupon_id + '&apply_range=' + item.apply_range)">
							<view class="gray9 f24">
								限指定部分商品
								<text class="icon iconfont icon-jiantou"
									style="color: #999999; font-size: 22rpx;"></text>
							</view>
							<view class="gray9 f24">本券不支持转赠</view>
						</view>
						<view class="range_item d-b-c" v-else-if="item.apply_range == 30"
							@click.stop="gotoPage('/pages/coupon/detail?coupon_id=' + item.coupon_id + '&apply_range=' + item.apply_range)">
							<view class="gray9 f24">
								限指定分类商品
								<text class="icon iconfont icon-jiantou"
									style="color: #999999; font-size: 22rpx;"></text>
							</view>
							<view class="gray9 f24">本券不支持转赠</view>
						</view>
						<view class="range_item d-b-c" v-else
							@click.stop="gotoPage('/pages/coupon/detail?coupon_id=' + item.coupon_id + '&apply_range=' + item.apply_range)">
							<view class="gray9 f24">
								全场通用
								<text class="icon iconfont icon-jiantou"
									style="color: #999999; font-size: 22rpx;"></text>
							</view>
							<view class="gray9 f24">本券不支持转赠</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 客服 -->
			<view v-if="nav_type == 3">
				<view class="d-s-s d-c p20 mpservice-wrap" v-if="!isloding">
					<view class="noDatamodel"
						v-if="dataModel == null || (dataModel.qq == '' && dataModel.wechat == '' && dataModel.phone == '')">
						该商家尚未设置客服</view>
					<template v-if="dataModel != null">
						<view v-if="dataModel.qq != ''" class="d-b-c p-30-0 f34 ww100 border-b"
							@click="copyQQ(dataModel.qq)">
							<image lazy-load src="/static/icon/concat1.png" mode="widthFix" class="imgIcon"></image>
							<view class="p-0-30 flex-1">
								<view>官方QQ</view>
								<view class="desc">{{dataModel.qq}}</view>
							</view>
							<text class="txt">点击复制</text>
						</view>
						<view v-if="dataModel.wechat != ''" class="d-b-c p-30-0 f34 ww100 border-b"
							@click="copyQQ(dataModel.qq)">
							<image lazy-load src="/static/icon/concat3.png" mode="widthFix" class="imgIcon"></image>
							<view class="p-0-30 flex-1">
								<view>官方微信</view>
								<view class="desc">{{dataModel.wechat}}</view>
							</view>
							<text class="txt">点击复制</text>
						</view>
						<view v-if="dataModel.phone != ''" class="d-b-c p-30-0 f34 ww100"
							@click="callPhone(dataModel.phone)">
							<image lazy-load src="/static/icon/concat2.png" mode="widthFix" class="imgIcon"></image>
							<view class="p-0-30 flex-1">
								<view>官方热线</view>
								<view class="desc">{{dataModel.phone}}</view>
							</view>
							<text class="txt">一键拨打</text>
						</view>
					</template>
				</view>
			</view>
			<!-- 商品列表 -->
			<view v-if="nav_type == 0">
				<view class="d-c-c p30" v-if="product_list.length == 0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无相关记录哦</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
				<view class="" style="width: 100%;height: 100rpx;"></view>
			</view>
		</scroll-view>
		<!-- 底部导航 -->
		<view class="d-a-c nav_bottom">
			<view :class="nav_type == 0 ? 'active' : ''" @click="nav_type = 0">
				<view class="icon iconfont icon-Homehomepagemenu"></view>
				<view>首页</view>
			</view>
			<view v-if="is_record == 1 && is_open == 1" :class="nav_type == 1 ? 'active' : ''" @click="nav_type = 1">
				<view class="icon iconfont icon-zhibo2"></view>
				<view>直播</view>
			</view>
			<view v-if="listData.length > 0" :class="nav_type == 2 ? 'active' : ''" @click="nav_type = 2">
				<view class="icon iconfont icon-hongbao1"></view>
				<view>优惠券</view>
			</view>
			<view v-if="service_open" :class="nav_type == 3 ? 'active' : ''" @click="toSevice">
				<view class="icon iconfont icon-kefu3"></view>
				<view>客服</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				isLieBiao: true,
				shop_info: '', //商户信息
				product_list: '', //商品列表
				dataList: '',
				shop_supplier_id: '', //商户ID
				isfollow: '', // 是否关注本店
				// ***********
				/*是否显示点*/
				indicatorDots: false,
				/*是否自动*/
				autoplay: true,
				/*切换时间*/
				interval: 5000,
				/*动画过渡时间*/
				duration: 1000,
				/*数据列表*/
				listData: [], //优惠券列表
				// ************
				/*顶部刷新*/
				topRefresh: false,
				/*底部加载*/
				loading: true,
				/*没有更多*/
				no_more: false,
				/*类别选中*/
				type_active: 'all',
				/*价格选中*/
				price_top: false,
				/*商户列表*/
				shopData: [],
				/*当前页面*/
				page: 1,
				search: '',
				last_page: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				topheight: 0,
				nav_type: 0,
				is_open: 0,
				is_record: 0,
				liveList: [],
				dataModel: {
					qq: '',
					wechat: '',
					phone: ''
				},
				service_type: 0,
				service_open: 0,
				statusBarHeight: 0,
				titleBarHeight: 0,
				category_id: 0,
				sortPrice: 0,
				adList: '', //轮播图
				/* 轮播图指示点 */
				swiperCurrent: 0
			};
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.product_list.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		onLoad(option) {
			let self = this;
			self.GetStatusBarHeight();
			self.shop_supplier_id = option.shop_supplier_id;
		},
		onShow() {
			this.getData();
		},
		mounted() {
			this.getProduct(this.type_active);
		},
		onPullDownRefresh() {
			/*下拉到顶，页面值还原初始化*/
			this.restoreData();
			this.getData();
			this.getProduct(this.type_active);
		},
		methods: {
			changeSwiper(e) {
				this.swiperCurrent = e.detail.current;
			},
			searchFunc() {
				this.shopData = [];
				this.product_list = [];
				this.page = 1;
				this.category_id = 0;
				this.sortType = "";
				this.sortPrice = 0;
				this.getProduct(this.type_active);
			},
			getScore(n, type) {
				n = n * 1;
				if (n <= 0 || !n) {
					return 0;
				}
				let num = n % 1;
				if (type == 1) {
					return n - num;
				}
				if (type == 2) {
					if (num == 0) {
						return 0;
					} else {
						return 1;
					}
				}
			},
			GetStatusBarHeight() {
				// #ifdef MP-WEIXIN
				let that = this;
				const SystemInfo = uni.getSystemInfoSync();
				let statusBarHeight = SystemInfo.statusBarHeight;
				this.statusBarHeight = uni.getMenuButtonBoundingClientRect().top;
				this.titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
				// #endif
				// #ifndef MP-WEIXIN
				const SystemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = SystemInfo.statusBarHeight;
				this.titleBarHeight = 30;
				// #endif
			},
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni
							.createSelectorQuery()
							.in(self)
							.select('.shop_head');
						view.boundingClientRect(data => {
							self.topheight = data.height;
							let h = self.phoneHeight * 2 - data.height * 2 - 100;
							self.scrollviewHigh = h;
							uni.hideLoading();
						}).exec();
					}
				});
			},
			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				self.bottomRefresh = true;
				self.page++;
				self.loading = true;
				if (self.page > self.last_page) {
					self.loading = false;
					self.no_more = true;
					return;
				}
				self.getProduct(self.type_active);
			},
			getProduct(e) {
				let self = this;
				let page = self.page;
				self.loading = true;
				self._get(
					'product.product/lists', {
						page: page || 1,
						sortType: 'price',
						sortPrice: 1,
						sortType: e,
						shop_supplier_id: self.shop_supplier_id,
						search: self.search
					},
					function(res) {
						self.loading = false;
						self.product_list = [...self.product_list, ...res.data.list.data];
						self.last_page = res.data.list.last_page;
						if (res.data.list.last_page <= 1) {
							self.no_more = true;
						}
					}
				);
			},
			/*还原初始化*/
			restoreData() {
				this.shopData = [];
				this.product_list = [];
				this.page = 1;
				this.category_id = 0;
				this.search = '';
				this.sortType = '';
				this.sortPrice = 0;
			},
			getservice() {
				let self = this;
				self.isloding = true;
				self._get(
					'index/mpService', {
						shop_supplier_id: self.shop_supplier_id
					},
					function(res) {
						self.dataModel = res.data.mp_service;
						self.isloding = false;
					}
				);
			},
			/*类别切换*/
			tabTypeFunc(e) {
				let self = this;
				if (e != self.type_active) {
					self.product_list = [];
					self.page = 1;
					self.no_more = false;
					self.loading = true;
					self.type_active = e;
					self.getProduct(e);
				}
			},

			//获取数据列表
			getData() {
				let self = this;
				self.loading = true;
				uni.showLoading({
					title: '加载中....'
				});
				self._post(
					'supplier.index/index', {
						shop_supplier_id: self.shop_supplier_id,
						visitcode: self.getVisitcode()
					},
					res => {
						self.loading = false;
						// self.page = res.data.productList.current_page
						// self.last_page = res.data.productList.last_page
						// self.product_list = [...self.product_list, ...res.data.productList.data];
						self.shop_info = res.data.detail;
						self.adList = res.data.adList;
						self.isfollow = res.data.detail.isfollow;
						self.listData = res.data.couponList;
						self.is_record = res.data.liv_status.is_record;
						self.is_open = res.data.liv_status.is_open;
						self.liveList = res.data.liveList.data;
						self.service_open = res.data.service_open;
						if (res.data.mp_service) {
							self.service_type = res.data.mp_service.service_type;
						} else {
							self.service_type = 10;
						}
						if (!self.scrollviewHigh) {
							self.$nextTick(function() {
								self.init();
							});
						}
						uni.hideLoading();
						self.getservice();
					}
				);
			},

			//选择图标模式或者列表模式    true 为列表模式  false 为图表模式
			select_type() {
				let self = this;
				self.isLieBiao = !self.isLieBiao;
			},
			//跳转商品页面
			goto_product(product_id) {
				this.gotoPage('/pages/product/detail/detail?product_id=' + product_id);
			},
			//关注商户/取消关注
			guanzhu() {
				let self = this;
				self._post(
					'user.Favorite/add', {
						pid: self.shop_supplier_id,
						type: 10
					},
					res => {
						if (self.isfollow == 0) {
							self.isfollow = 1;
						} else if (self.isfollow == 1) {
							self.isfollow = 0;
						}
					}
				);
			},
			/**
			 * 领取优惠券
			 */
			receiveCoupon: function(index) {
				let self = this;
				let item = self.listData[index];
				if (item.state.value == 0) {
					uni.showToast({
						title: '已抢光',
						icon: 'none'
					});
					return false;
				}
				self._post(
					'user.coupon/receive', {
						coupon_id: item.coupon_id
					},
					function(result) {
						uni.showToast({
							title: '领取成功',
							icon: 'success',
							mask: true,
							duration: 2000
						});
						item.state.value = 0;
						item.state.text = '已领取';
					}
				);
				self.getData(self.type_active);
			},
			/*复制*/
			copyQQ(message) {
				//#ifdef MP-WEIXIN
				uni.setClipboardData({
					//准备复制的数据
					data: message,
					success: function(res) {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							mask: true,
							duration: 2000
						});
					}
				});
				//#endif
				//#ifdef H5
				var input = document.createElement('input');
				input.value = message;
				document.body.appendChild(input);
				input.select();
				input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
				document.body.removeChild(input);
				uni.showToast({
					title: '复制成功',
					icon: 'success',
					mask: true,
					duration: 2000
				});
				//#endif
			},
			/*拨打电话*/
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			toRoom(item) {
				if (item.record_url != '') {
					this.gotoPage('/pagesLive/live/playback?room_id=' + item.room_id);
				} else {
					return false;
				}
			},
			toSevice() {
				if (this.service_type == 10 || this.shop_info.user_id == uni.getStorageInfoSync('user_id')) {
					this.nav_type = 3;
				} else if (this.service_type == 20) {
					if (this.shop_info.category_id == 0) {
						uni.showToast({
							title: '尚未设置客服',
							icon: 'none', //如果要纯文本，不要icon，将值设为'none'
							duration: 2000 //持续时间为 2秒
						});
					} else {
						if (this.getUserId()) {
							if (this.shop_info.chat_user_id && this.shop_info.chat_user_id != 0) {
								this.gotoPage(
									'/pagesPlus/chat/chat?chat_user_id=' +
									this.shop_info.chat_user_id +
									'&shop_supplier_id=' +
									this.shop_info.shop_supplier_id +
									'&nickName=' +
									this.shop_info.store_name
								);
							} else {
								this.nav_type = 3;
							}
						} else {
							this.doLogin();
						}
					}
				}
			},
			goback() {
				uni.navigateBack({});
			}
		}
	};
</script>

<style lang="scss">
	.box-type {
		width: 36rpx;
		height: 36rpx;
	}

	.sales {
		color: #ffffff;
	}

	.collect {
		color: #ffffff;
	}

	.nav_bottom {
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		background-color: #ffffff;
	}

	.nav_bottom .icon {
		font-size: 50rpx;
	}

	.nav_bottom .active {
		@include font_color("font_color");
	}

	.nav_bottom .active .icon {
		@include font_color("font_color");
	}

	.live_list {
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 30rpx;
	}

	.live_item {
		position: relative;
		margin: 10rpx 0;
	}

	.live_img {
		width: 100%;
	}

	.live_img image {
		width: 335rpx;
		height: 375rpx;
		border-radius: 15rpx;
	}

	.live_name {
		font-size: 34rpx;
		margin: 15rpx 0;
	}

	.record {
		position: absolute;
		top: 0;
		width: 150rpx;
		font-size: 22rpx;
		height: 33rpx;
		line-height: 32rpx;
		text-align: center;
		background: #fdd933;
		color: #ffffff;
	}

	.record_off {
		position: absolute;
		top: 0;
		width: 150rpx;
		font-size: 22rpx;
		height: 33rpx;
		line-height: 32rpx;
		text-align: center;
		background: #fdd933;
		color: #ffffff;
	}

	.mpservice-wrap {
		width: 100%;
		box-sizing: border-box;
	}

	.mpservice-wrap .mp-image {
		width: 560rpx;
		margin-top: 40rpx;
	}

	.mpservice-wrap .mp-image image {
		width: 100%;
	}

	.head_top {
		position: relative;
		height: 30px;
		line-height: 30px;
		color: #ffffff;
		font-size: 30rpx;
	}

	.bg_topimg {
		position: absolute;
		top: 0;
		z-index: 0;

		.bg-head-shoadow {
			position: absolute;
			left: 0;
			top: 0;
			background: rgba(#000, 0.35);
			z-index: 2;
			width: 750rpx;
		}

		.bg-head {
			width: 750rpx;
			z-index: 1;
		}
	}

	.coupon {
		position: relative;
		// background-color: #ffffff;
		overflow: hidden;
		padding-bottom: 160rpx;
	}

	.noborder {
		border: none;
	}

	.item-wrap {
		border: 1px solid #eee;
	}

	/* 重制 */
	.shop_head {
		background: linear-gradient(45deg, #4f516a 0%, #394263 100%);
		z-index: 1;
	}

	.shop_head.bgNull {
		background: none;
	}

	.serach-box {
		position: relative;
		z-index: 100;
		padding: 0 20rpx;

		.icon-Homehomepagemenu {
			color: #fff;
			font-size: 28rpx;
			width: 60rpx;
			height: 60rpx;
			background: rgba(#fff, 0.25);
			border-radius: 29rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 28rpx;
		}
	}

	.top_search {
		height: 60rpx;
		line-height: 60rpx;
		background: #ffffff;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #999;
	}

	.top_search.search-wx {
		flex: 1;
	}

	.top_search.special {
		width: 100%;
		border: 1px solid transparent;
		border-right: none;
	}

	.top_search .icon-sousuo {
		font-size: 26rpx;
		color: #999;
		margin-left: 26rpx;
		margin-right: 10rpx;
	}

	.shop_logo {
		width: 102rpx;
		height: 102rpx;
		display: block;
		border-radius: 20rpx;
		margin-right: 20rpx;

		.shop_logo_image {
			width: 102rpx;
			height: 102rpx;
			border-radius: 20rpx;
		}
	}

	.shop_info {
		flex: 1;
		box-sizing: border-box;
		padding-top: 10rpx;

		.icon.icon-jiantou1 {
			font-size: 28rpx;
			color: #fff;
			font-weight: 400;
		}
	}

	.shop_head_info {
		width: 100%;
		margin: 0 auto;
		position: relative;
		padding: 26rpx 18rpx 26rpx 22rpx;
		box-sizing: border-box;

		.collected {
			width: 128rpx;
			height: 56rpx;
			border-radius: 26rpx;
			font-size: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 1;
			color: #fff;
			border: 1px solid;
			@include border_color("border_color");
			@include background_color("background_color");
		}
	}

	.inner-tab {
		position: relative;
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #ffffff;
		z-index: 9;

		.item {
			flex: 1;
			color: #333;
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.item.active {
			position: relative;
		}

		.item.active,
		.item .arrow.active .iconfont {
			@include font_color("font_color");
		}

		.item.active::after {
			content: "";
			position: absolute;
			bottom: 0rpx;
			width: 42rpx;
			height: 5rpx;
			@include background_color("background_color");
			border-radius: 2rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	}

	.inner-tab .item .box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.inner-tab .item .arrows {
		margin-left: 10rpx;
		line-height: 0;
	}

	.inner-tab .item .iconfont {
		line-height: 24rpx;
		font-size: 24rpx;
	}

	.inner-tab .item .arrow,
	.inner-tab .item .svg-icon {
		width: 20rpx;
		height: 20rpx;
	}

	.product-lists {
		width: 100%;
		background-color: #ffffff;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.product_item {
			margin: 0 auto;
			display: flex;
			padding: 22rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;

			.product_images {
				width: 210rpx;
				height: 210rpx;
				background-color: rgba(0, 0, 0, 0.1);
				border-radius: 25rpx;
				overflow: hidden;
				position: relative;

				.product-sellout {
					position: absolute;
					top: 0;
					left: 0;
					background: rgba(#000, 0.45);
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 1;
					width: 210rpx;
					height: 210rpx;

					.product-sellout-btn {
						width: 106rpx;
						height: 46rpx;
						border-radius: 5rpx;
						border: 1px solid #ffffff;
						font-size: 24rpx;
						color: #ffffff;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.product_image {
					width: 210rpx;
					height: 210rpx;
				}
			}

			.product_item_info {
				flex: 1;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				padding-left: 20rpx;
				box-sizing: border-box;

				.product-name {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 16rpx;
					display: -webkit-box;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.product-sale {
					font-size: 24rpx;
					color: #999999;
					flex: 1;
				}
			}
		}

		.product_item:last-child {
			border: none;
		}
	}

	.product-lists.list-2 {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		align-items: flex-start;
		background: none;
		flex-wrap: wrap;

		.product_item {
			background-color: #ffffff;
			width: 344rpx;
			flex-direction: column;
			margin: 0;
			border-radius: 15rpx;
			overflow: hidden;
			padding: 22rpx 20rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			border: none;

			.product_images {
				width: 304rpx;
				height: 304rpx;
				border-radius: 15rpx;
				margin-bottom: 14rpx;

				.product-sellout {
					width: 304rpx;
					height: 304rpx;

					.product-sellout-btn {
						width: 162rpx;
						height: 68rpx;
						font-size: 32rpx;
					}
				}

				.product_image {
					width: 304rpx;
					height: 304rpx;
				}
			}

			.product_item_info {
				padding: 0;

				.product-name {
					-webkit-line-clamp: 1;
					margin-bottom: 10rpx;
				}

				.product-sale {
					flex: 0;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.starts {
		width: 24rpx;
		height: 24rpx;
		margin-right: 6rpx;
		display: block;
	}

	.starts-box {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.mpservice-wrap {
		width: 100%;
		box-sizing: border-box;
	}

	.noDatamodel {
		font-size: 30rpx;
		width: 100%;
		text-align: center;
		height: 200rpx;
		line-height: 128rpx;
		color: #666;
	}

	.imgIcon {
		width: 80rpx;
	}

	.desc {
		font-size: 28rpx;
		color: #666;
		letter-spacing: 1rpx;
	}

	.swiper-box .swiper {
		width: 750rpx;
		height: 308rpx;
		border-radius: 30rpx 30rpx 0 0;
		/* background-color: #FFFFFF; */
		box-sizing: border-box;
	}

	.swiper-box image {
		width: 710rpx;
		height: 262rpx;
		border-radius: 25rpx;
		margin: 0 auto;
	}

	.swiper-box .swiper-dots {
		position: absolute;
		bottom: 40rpx;
		left: 0;
		right: 0;
		margin: auto;
		width: 100%;
		z-index: 2;
	}

	.swiper-dots.rectangle .swiper-dot {
		width: 40rpx;
		height: 6rpx;
		margin: 0 4rpx;
		background: #fff;
		opacity: 0.3;
		border-radius: 4rpx;
	}

	.swiper-dots.rectangle .swiper-dot.active {
		opacity: 1;
	}
</style>